<template>
	<div class="system-iotDeviceGroup-add">
		<!-- 添加或修改设备组对话框 -->
		<el-dialog v-model="isShowDialog" width="900px" :close-on-click-modal="false" :destroy-on-close="true">
			<template #header>
				<div>充值记录</div>
			</template>
			<el-table v-loading="loading" :data="tableData.data">
				<el-table-column label="日期" align="center" prop="date" :formatter="formatDateTime" min-width="100px" />
				<el-table-column label="金额" align="center" prop="amount" min-width="100px" />
			</el-table>
			<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNumber"
				v-model:limit="tableData.param.pageLength" @pagination="getCompanyRechargeList" />
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
import { formatDateTime } from '@/utils/index'
import { companyRechargeListApi } from '@/api/financeCenter/financeManage/index'
export default defineComponent({
	name: 'financeManagedetail',//充值记录
	components: {},
	// props: {},
	setup(props, { emit }) {
		const formRef = ref<HTMLElement | null>(null);
		const menuRef = ref();
		const state = reactive({
			loading: false,
			isShowDialog: false,
			tableData: {
				data: [],
				total: 0,
				param: {
					pageNumber: 1,
					pageLength: 10,
					companyCode: undefined,
				},
			}

		});
		// 打开弹窗
		const openDialog = async(row) => {
			resetForm();
			state.tableData.param.companyCode=row.companyCode
			await getCompanyRechargeList()
			state.isShowDialog = true;
		};
		const getCompanyRechargeList= async () => {
			state.loading=true
			let res:any = await companyRechargeListApi(state.tableData.param)
			state.tableData.data = res.data.list
			state.tableData.total=res.data.total
			state.loading=false
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};

		const resetForm = () => {
			state.tableData.total=undefined
			state.tableData.param.pageLength=undefined
			state.tableData.param.pageNumber=undefined
			state.tableData.param.companyCode=undefined
		};
		return {
			openDialog,
			closeDialog,
			onCancel,
			resetForm,
			menuRef,
			formRef,
			formatDateTime,
			getCompanyRechargeList,
			...toRefs(state),
		};
	},
});
</script>
<style scoped></style>
